<template>
  <div class="person">
    <h1>Watch---监视以上全部!!!</h1>
    <p>特点：若需要被监视的属性值是多个数据，可以将第一个参数写成数组的形式</p>
    <span style="margin-right: 10px">姓名：{{ personMsg.name }}</span>
    <span>年龄：{{ personMsg.age }}</span>
    <br />
    <span>第一台车：{{ personMsg.car.car1 }}</span>
    <br />
    <span>第二台车：{{ personMsg.car.car2 }}</span>
    <br />
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeCar1">换第一台车</button>
    <button @click="changeCar2">换第二台车</button>
    <button @click="changeAllCar">点击我马上变厉害！</button>
  </div>
</template>


<script lang="ts" setup name="watch2Ref">
import { watch, ref, reactive } from 'vue'

// 特点：监视 ref 或 reactive 定义的【对象类型】数据中的某个属性
// 若需要被监视的属性值不是【对象类型】，需要写成函数形式
// 若需要被监视的属性值依然是【对象类型】，可直接编译，也可以写成函数，不过建议写成函数形式
const personMsg = reactive({
  name: '小淳',
  age: 18,
  car: {
    car1: '爱玛',
    car2: '小刀'
  }
})

function changeName() {
  personMsg.name = '佳静'
}
function changeAge() {
  personMsg.age = 20
}
function changeCar1() {
  personMsg.car.car1 = '宝岛car1变'
}
function changeCar2() {
  personMsg.car.car2 = '雅迪car2变'
}
function changeAllCar() {
  personMsg.car = {
    car1: '特斯拉',
    car2: '奔驰'
  }
}

// Watch第四种用法:监视多个数据
watch([() => personMsg.name, () => personMsg.car.car1, personMsg.car], (oldValue, newValue) => {
  // newValue是整个数组的变化
  console.log('监视多个数据', oldValue, newValue)
})
</script>

<style scoped>
.person {
  width: 600px;
  height: 220px;
  border-radius: 5px;
  padding: 10px;
  background-color: pink;
  box-shadow: 0 0 10px;
  padding: 5px;
}
button {
  margin: 6px 6px;
}
</style>
